<template>
    <div class="List-goods">
        <!-- 循环热租商品 -->
        <div  class="goods-item"  v-for="u in products">
        <van-image class="image"
            src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"
        />
        <div  class="van-multi-ellipsis--l2 msg">
            <!-- 读取商品信息 -->
           {{ u.brand }}
        </div>
        <!-- 后端读取价格信息 -->
        <span style="color: red;">￥ {{(u.rent/u.minimumRentalDuration).toFixed(2)}}/天</span><br>
        <span style="margin-left: 6px;
         font-size: 12px; color: gray;
         text-decoration: line-through">￥{{((u.rent+1000)/u.minimumRentalDuration).toFixed(2)}}/天</span>
        </div>
          <span style="writing-mode: vertical-rl;
          margin-bottom: 50px;
          ">
            查看更多
            <van-icon name="arrow-left" />
        </span>  

        
    </div>
</template>

<script setup>
import {onMounted, ref} from "vue"
import api from "@/api";
import '../../assets/css/HotPage.css'
const products=ref([])
onMounted(()=>{
    api.getReq('/product/showAll').then(res=>{
        let result=res.data
        if(result.code==1){
            products.value=result.data.list
        }
        
    })
})
</script>

<style scoped>
</style>
